<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求1：统计一共有多少个按钮
        需求2：取出第2个button的文本
        需求3：输出所有button标签的文本
        需求4：输出“测试四”按钮时所有按钮中的第几个
        */
        $(function(){
            //获取button,并创建button数组
            var $buttonArr=$("button");
            console.log($buttonArr);
            var $btn1=$("#btn1");
           
            //需求1：统计一共有多少个按钮
            $btn1.click(function(){
                console.log($buttonArr.length+1+"个按钮");
            })

            //需求2：取出第2个button的文本
            var $btn2=$("#btn2");
            $btn2.click(function(){
                console.log($buttonArr[1].innerHTML);
            })

            //需求3：输出所有button标签的文本
            var $btn3=$("#btn3");
            $btn3.click(function(){
                $.each($buttonArr,function(index){
                   console.log($buttonArr[index].innerHTML); 
                })
            })

            //需求4：输出“测试四”按钮时所有按钮中的第几个
            var $btn4=$("#btn4");
            $btn4.click(function(){
                console.log($btn4.index());
            })
        })
    </script>
</head>
<body>
    <button id="btn1">测试一</button>
    <button id="btn2">测试二</button>
    <button id="btn3">测试三</button>
    <button id="btn4">测试四</button>
    <!--
        1.jQuery对象是一个包含所有匹配的任意多个DOM元素的伪数组对象
        2.基本行为
            size()/length：包含的DOM元素个数
            [index]/get(index)：得到对应位置的DOM元素
            each()：遍历包含的所有DOM元素
            index()：得到在所在兄弟元素中的下标
    -->
</body>
</html>